<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BFC</title>

        <style type="text/css">
            .odd { background: #dedede ; }
            .even { background: rgb(255, 190, 69) ;}

            .wrapper { 
                border: 5px solid blue ; 
                position: relative ;
                width: 1000px ;
                height: 600px ;
            }

            .first {
                position: absolute ; left: 0 ; top: 0 ; 
                width: 300px ;
                border: 2px solid red ;
            }

            .second {
                position: absolute ; right: 0 ; top: 0 ; 
                width: 300px ;
                border: 2px solid purple ;
            }

            .third {
                position: absolute ; left: 0 ; bottom: 0 ; 
                width: 300px ;
                border: 2px solid green ;
            }

            .fourth {
                position: fixed ; right: 0 ; bottom: 0 ; 
                width: 300px ;
                border: 2px solid blue ;
            }

        </style>
    </head>
    <body>

        <div class="wrapper">
            <div class="first">
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
                <p class="even">问渠那得清如许</p>
                <p class="odd">为有源头活水来</p>
                <p class="even">春眠不觉晓</p>
                <p class="odd">处处闻啼鸟</p>
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
            </div>
            <div class="second">
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
                <p class="even">问渠那得清如许</p>
                <p class="odd">为有源头活水来</p>
            </div>
            <div class="third">
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
                <p class="even">问渠那得清如许</p>
                <p class="odd">为有源头活水来</p>
            </div>
            <div class="fourth">
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
                <p class="even">卧槽，好多的鸟啊</p>
            </div>
        </div>
        
    </body>
</html>